<script setup>
import FormCountTagNormal from "@/components/WordFormedTag/FormCountTagNormal.vue";
import {ref, defineModel, computed, defineEmits, onMounted, inject, nextTick} from "vue";
import {remove} from 'lodash-unified';
import {Check, Close} from "@element-plus/icons-vue";
import {clearAndPushAll} from "@/utils/ArrayUtil";
import {lijuContextEventProcessors} from "@/components/constants";

// const selectedvalue = ref([]);
const theModel = defineModel();
const options = [
    {
        label: 'v',
        options: [
            {
                value: 'v.1',
                label: 'v.1',
            },
            {
                value: 'v.2',
                label: 'v.2',
            },
        ],
    },
    {
        label: 'n',
        options: [
            {
                value: 'n.1',
                label: 'n.1',
            },
            {
                value: 'n.2',
                label: 'n.2',
            },
            {
                value: 'n.3',
                label: 'n.3',
            },
            {
                value: 'n.4',
                label: 'n.4',
            },
        ],
    },
    {
        label: 'n.idioms',
        options: [
            {
                value: 'n.idioms.1',
                label: 'n.idioms.1',
            },
            {
                value: 'n.idioms.2',
                label: 'n.idioms.2',
            },
            {
                value: 'n.idioms.3',
                label: 'n.idioms.3',
            },
        ],
    },
    {
        label: 'v.idioms',
        options: [
            {
                value: 'v.idioms.1',
                label: 'v.idioms.1',
            },
            {
                value: 'v.idioms.2',
                label: 'v.idioms.2',
            },
            {
                value: 'v.idioms.3',
                label: 'v.idioms.3',
            },
        ],
    }, {
        label: 'adj',
        options: [
            {
                value: 'adj.1',
                label: 'adj.1',
            },
            {
                value: 'adj.2',
                label: 'adj.2',
            },
            {
                value: 'adj.3',
                label: 'adj.3',
            },
            {
                value: 'adj.4',
                label: 'adj.4',
            },
            {
                value: 'adj.5',
                label: 'adj.5',
            },
            {
                value: 'adj.6',
                label: 'adj.6',
            }
        ],
    }
]

let cptOptionsArr = computed(() => options.flatMap(entry => entry.options));

function removeTheFormCount(label) {
    remove(theModel.value, ele => ele === label);
}

const emits = defineEmits(["cancelIt", "confirmIt"]);

function cancelIt(e) {
    emits("cancelIt");
}

function confirmIt(e) {
    e.preventDefault();
    emits("confirmIt");
    e.stopPropagation();
}

let theSelect = ref();
onMounted(async () => {
    await nextTick();
    theSelect.value.focus();
});
</script>


<template>
  <!--    {{theModel}}-->
  <!--    <br/>-->
  <!--    <span style="">-->
  <!--               @keydown.ctrl.enter.exact="e=>e.preventDefault()"-->
<!--  @keyup.ctrl.enter.exact="confirmIt"-->
<!--  @keydown.tab.exact="confirmIt"-->
    <el-select v-model="theModel"
               placeholder="Select"
               ref="theSelect"
               multiple
               filterable
               allow-create
               default-first-option
               @keydown.stop="e=>e.stopPropagation()"
               @keydown.tab.exact="confirmIt"
               @keyup.esc.exact="cancelIt"
               :reserve-keyword="false"
               v-bind="$attrs">
        <el-option-group
                v-for="group in options"
                :key="group.label"
                :label="group.label"
        >
            <el-option
                    v-for="item in group.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                <FormCountTagNormal :label="item.label"/>
            </el-option>
        </el-option-group>
        <template #tag>
            <FormCountTagNormal v-for="item in theModel" :key="item" :label="item" :pickedDoneClosableSw="true"
                                @closeTag="removeTheFormCount"/>
        </template>
    </el-select>

    <el-button :icon="Check" style="margin-left: 1px;width: 25px" @click="confirmIt"></el-button>
    <el-button :icon="Close" style="margin-left: 0px;width: 25px" @click="cancelIt"></el-button>
  <!--    </span>-->
</template>

<style scoped>
.el-select :deep(.el-select__wrapper) {
    padding: 4px 12px;
    gap: 1px;
}

.el-select :deep(.el-select__selection) {
    gap: 2px;
}


</style>